<template>
  <div>
    <el-dialog
      title="学院管理"
      width="50%"
      :visible.sync="value"
      :close-on-click-modal="false"
      @close="onClose"
    >
      <div class="head">
        <el-row :gutter="20">
          <el-col :span="3" :offset="0">
            <span>选择学院</span>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-select v-model="college_choice_item" placeholder="请选择">
              <el-option
                v-for="(item,index) in college_data"
                :key="index"
                :label="item.collegeName"
                :value="item.collegeName"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-card class="box-card" v-if="college_choice_item != ''">
        <div slot="header" class="clearfix">
          <span>管理人员</span>
        </div>
        <div class="content" v-loading="loading">
          <el-tag
            v-for="item in college_choice_administrators"
            :key="item"
            closable
            :disable-transitions="false"
            effect="dark"
            @close="handleClose(item)"
          >{{item}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">添加</el-button>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { addCollege, getCollegeList } from '@//api/requests/college'
import { success } from '@/util/message'


export default {
  props: ['value'],
  data () {
    return {
      loading: false,
      college_data: [],
      college_choice_item: '',
      college_choice_item_data: {},
      college_choice_administrators: [],
      inputVisible: false,
      inputValue: '',

    }
  },
  watch: {
    value (val) {
      if (val) {
        this.onQueryCollege()
      }
    },
    college_choice_item (val) {
      this.college_data.forEach(item => {
        if (item.collegeName == val) {
          this.college_choice_item_data = item
          this.college_choice_administrators = JSON.parse(item.administrators)
          return
        }
      })
    }
  },
  created () {
    this.onQueryCollege()
  },
  methods: {
    onQueryCollege () {
      this.loading = true
      getCollegeList().then(res => {
        if (res.code == 200) {
          this.college_data = res.data
        }
        this.loading = false
      })

    },
    onSaveCollege () {
      let data = this.college_choice_item_data
      data.administrators = JSON.stringify(this.college_choice_administrators)
      addCollege(data).then(res => {
        if (res.code == 200) {
          success(this, '修改成功')
        }
      })


    },
    onClose () {
      this.$emit('input', false)
    },
    handleClose (tag) {
      this.college_choice_administrators.splice(this.college_choice_administrators.indexOf(tag), 1);
      console.log(this.college_choice_administrators)
      this.onSaveCollege()
    },
    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      });
    },
    handleInputConfirm () {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.college_choice_administrators.push(inputValue)
        this.onSaveCollege()
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  },

}
</script>

<style lang="scss" scoped>
.head {
    span {
        line-height: 40px;
    }
}
.el-card {
    margin-top: 20px;
}
.content {
    height: 100px;
    width: 100%;
    overflow: auto;
    .el-tag {
        margin-right: 10px;
    }
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>